<template>
  <div class="boxOne">

    <!-- 表单开始 -->
    <div>
      <el-form
        :rules="rules"
        ref="loginForm"
        :model="loginForm"
        class="loginContainer"
      >
        <h3 class="loginTitle" style="font-size: 36px">欢迎登录</h3>
        <el-form-item prop="mobile">
          <el-input
            type="text"
            autocomplete="false"
            v-model="loginForm.mobile"
            placeholder="请输入电话号码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            autocomplete="false"
            v-model="loginForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <el-checkbox
          v-model="loginForm.remenberMe"
          checked
          style="margin: 10px 0 15px 5px"
          >记住我</el-checkbox
        >
        <el-button type="primary" style="width: 100%;" @click="submitLogin"
          >登录</el-button
        >
        <div class="register">
          <el-button type="text" @click="regist">没有账号？立即注册</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
import { Message } from "element-ui";

export default {
  name: "login",
  data() {
    return {
      captchaUrl: "",
      loginForm: {
        mobile: "13568387255",
        password: "2827528315",
        // mobile: "",
        // password: "",
        // code: "",
      },
      rules: {
        mobile: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    regist() {
      this.$router.push("/register");
    },
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          let salt = "1a2b3c4d";
          let str =
            "" +
            salt.charAt(0) +
            salt.charAt(2) +
            this.loginForm.password +
            salt.charAt(5) +
            salt.charAt(4);
          //请求后端登录接口
          let param = new URLSearchParams();
          param.append("mobile", this.loginForm.mobile);
          param.append("password", md5(str));
          this.$http({
            method:"post",
            url:"/login",
            data:param
          }).then((res)=>{
            if (res.code == 200) {
              this.$store.commit("isLogin", true);
              this.$store.commit("userName", res.data.nickname);
              this.$store.commit("setToken", res.data.Token);
              Message.success("登录成功！");
              //页面跳转
              this.$router.replace("/"); //replace不能进行网页后退 push可以进行网页后退
              } else {
              Message.error("手机号或密码错误！");
            }
          });
        } else {
          this.$message.error("请输入所有字段");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.boxOne {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-image: url("http://campus.51job.com/csxbank2022/images/bj.jpg");
  /* 固定body的背景 */
  background-attachment: fixed;
  background-size: cover;
}
/* logo */
/* .logo {
  width: 200px;
  height: 200px;
  margin-top: 60px;
  margin-left: 70px;
}

.logo img {
  width: 125px;
}

.text1 {
  width: 170px;
  height: 50px;
  color: #fff;
  margin-top: 60px;
  margin-left: 200px;
  font-size: 50px;
  font-weight: bold;
}

.text2 {
  width: 300px;
  height: 40px;
  color: #fff;
  margin-top: 10px;
  margin-left: 200px;
  font-size: 30px;
  letter-spacing: 5px;
}

.text3 {
  width: 80px;
  height: 15px;
  margin-left: 70px;
  margin-top: 300px;
  color: #bfc2ca;
  font-size: 14px;
  float: left;
}

.text4 {
  width: 80px;
  height: 15px;
  margin-left: 10px;
  margin-top: 300px;
  float: left;
}

.text4 img {
  width: 15px;
}

.text5 {
  width: 80px;
  height: 15px;
  margin-left: -30px;
  margin-top: 300px;
  color: #bfc2ca;
  font-size: 12px;
  float: left;
} */

.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  width: 350px;
  height: 380px;
  padding: 15px 35px 15px 35px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #eaeaea;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  right: 180px;
}
.register {
  margin-top: 20px;
  position: relative;
  left: 115px;
}
.loginTitle {
  margin: 20px auto 50px auto;
  text-align: center;
}
</style>